<template>
  <div class="macarons" style="width: 100%; height: 100%;" :pieType="pieType" />
</template>

<script>
import echarts from 'echarts';
import { byNewSesame, byCar, byHouse, byAccumulation } from '@/api/home';
require('echarts/theme/macarons'); // echarts theme
import resize from '../components/mixins/resize';
export default {
  mixins: [resize],
  props: {
    pieType: {
      type: String,
      default: 'NewSesame'
    },
    chartData: {
      type: Array
    },
    channelId: {
      type: Number
    }
  },
  data() {
    return {
      chart: null,
      listQuery: {
        startTime: this.chartData.startTime,
        endTime: this.chartData.endTime,
        channelId: this.channelId
      },
      list: {}
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.listQuery.startTime = val.startTime;
        this.listQuery.endTime = val.endTime;
        this.handleGetChartDate();
      }
    },
    channelId: {
      deep: true,
      handler(val) {
        this.listQuery.channelId = val;
        this.handleGetChartDate();
      }
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    async getByNewSesame() {
      const res = await byNewSesame(this.listQuery);
      if (res.data.code === 200) {
        this.list = res.data.data;
        this.initChart();
      }
    },
    async getByCar() {
      const res = await byCar(this.listQuery);
      if (res.data.code === 200) {
        this.list = res.data.data;
        this.initChart();
      }
    },
    async getByHouse() {
      const res = await byHouse(this.listQuery);
      if (res.data.code === 200) {
        this.list = res.data.data;
        this.initChart();
      }
    },
    async getByAccumulation() {
      const res = await byAccumulation(this.listQuery);
      if (res.data.code === 200) {
        this.list = res.data.data;
        this.initChart();
      }
    },
    handleGetChartDate() {
      if (this.pieType === 'NewSesame') {
        this.getByNewSesame();
      } else if (this.pieType === 'Car') {
        this.getByCar();
      } else if (this.pieType === 'House') {
        this.getByHouse();
      } else if (this.pieType === 'Accumulation') {
        this.getByAccumulation();
      }
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons');
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)<br/>'
        },
        legend: {
          orient: 'vertical',
          right: 0,
          bottom: 30,
          icon: 'pin',
          padding: [-30, 0],
          itemHeight: 10
        },
        series: [
          {
            type: 'pie',
            width: '50%',
            height: '50%',
            radius: '50%',
            center: ['40%', '50%'],
            label: {
              show: true,
              formatter(param) {
                return param.percent + '%';
              }
            },
            labelLine: {
              length: 10,
              length2: 5
            },
            data: this.list,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                top: -500,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    }
  }
};
</script>
